import React, { Component } from 'react'
import './6.css';

export default class ColorPickerCom extends Component {
  // 1. 声明状态
  state = {
    r: 0,
    g: 0,
    b: 0
  }

  //声明 change 方法
  change = (e) => {
    this.setState({
      [e.target.name] : e.target.value
    })
  }

  render() {
    //解构赋值
    let {r, g, b} = this.state;
    return (
      <div className='color-container'>
        {/* 颜色显示区 */}
        <div className="color-show" style={{background: `rgb(${r},${g},${b})`}}></div>
        <hr />
        {/* 颜色控制区 */}
        <div className="color-control">
          R: <input name="r" type="range" min="0" max='255' value={this.state.r} onChange={this.change} /><br />
          G: <input name="g" type="range" min="0" max='255' value={this.state.g} onChange={this.change} /><br />
          B: <input name="b" type="range" min="0" max='255' value={this.state.b} onChange={this.change} /><br />
          <input type="text" value={`rgb(${r},${g},${b})`} /><button onClick={() => {
            //向剪切板中写入一条数据
            navigator.clipboard.writeText(`rgb(${r},${g},${b})`)
          }}>点击复制</button>
        </div>
      </div>
    )
  }
}
